<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dota Show</title>

<style type="text/css">
html{overflow:hidden;}
body{position:absolute;margin:0px;padding:0px;background:#eee;width:100%;height:100%;color:#fff;font-family:arial;font-size:0.8em;}
/* screen */
#screen{position:absolute;width:100%;height:100%;background:#000;overflow:hidden;}
#screen img, canvas{position:absolute;left:-9999px;cursor:pointer;image-rendering:optimizeSpeed;}
#screen .href{border:#FFF dotted 1px;}
#screen .fog{position:absolute;background:#fff;opacity:0.1;filter:alpha(opacity=10);}
#command{position:absolute;left:1em;top:1em;width:130px;z-index:30000;background:#000;border:#000 solid 1em;}
#bar{position:relative;left:1em;top:1em;height:160px;}
#bar .button{position:absolute;background:#222;width:20px;height:20px;cursor:pointer;}
#bar .loaded{background:#666;}
#bar .viewed{background:#fff;}
#bar .selected{background:#f00;}
#urlInfo{font-size:20px;position:absolute;visibility:hidden;z-index:30000;padding-left:12px;cursor:pointer;}

#detail{font-size:20px;position:absolute;visibility:hidden;z-index:30000;padding-left:12px;cursor:pointer;}
</style>

<script type="text/javascript">
// =============================================================background:url(images/r.gif) no-repeat 0 4px;
//           ===== 3D gallery experiment =====
// script written by Gerard Ferrandez - April 5, 2010
// http://www.dhteumeuleu.com
// use under a CC-BY-NC license
// -------------------------------------------------------------
// update: April 17 : added hyperlinks, tweaked z-index
// =============================================================

var m3D = function () {
	/* ---- private vars ---- */
	var diapo = [],
		imb,
		scr,
		bar,
		selected,
		urlInfo,
		detail,
		imagesPath = "./images/",
		camera = {x:0, y:0, z:-650, s:0, fov: 500},
		nw = 0,
		nh = 0;
	/* ==== camera tween methods ==== */
	camera.setTarget = function (c0, t1, p) {
		if (Math.abs(t1 - c0) > .1) {
			camera.s = 1;
			camera.p = 0;
			camera.d = t1 - c0;
			if (p) {
				camera.d *= 2;
				camera.p = 9;
			}
		}
	}
	camera.tween = function (v) {
		if (camera.s != 0) {
			camera.p += camera.s;
			camera[v] += camera.d * camera.p * .01;
			if (camera.p == 10) camera.s = -1;
			else if (camera.p == 0) camera.s = 0;
		}
		return camera.s;
	}
	/* ==== diapo constructor ==== */
	var Diapo = function (n, img, x, y, z) {
		if (img) {
			this.url = img.url;
			this.title = img.title;
			this.detail = img.detail;
			this.color = img.color;
			this.isLoaded = false;
			if (document.createElement("canvas").getContext) {
				/* ---- using canvas in place of images (performance trick) ---- */
				this.srcImg = new Image();
				this.srcImg.src = imagesPath + img.src;
				this.img = document.createElement("canvas");
				this.canvas = true;
				scr.appendChild(this.img);
			} else {
				/* ---- normal image ---- */
				this.img = document.createElement('img');
				this.img.src = imagesPath + img.src;
				scr.appendChild(this.img);
			}
			/* ---- on click event ---- */
			this.img.onclick = function () {
				if (camera.s) return;
				if (this.diapo.isLoaded) {
					if (this.diapo.urlActive) {
						/* ---- jump hyperlink ---- */
						top.location.href = this.diapo.url;
					} else {
						/* ---- target positions ---- */
						camera.tz = this.diapo.z - camera.fov;
						camera.tx = this.diapo.x;
						camera.ty = this.diapo.y;
						/* ---- disable previously selected img ---- */
						if (selected) {
							selected.but.className = "button viewed";
							selected.img.className = "";
							selected.img.style.cursor = "pointer";
							selected.urlActive = false;
							urlInfo.style.visibility = "hidden";
							detail.style.visibility = "hidden";
						}
						/* ---- select current img ---- */
						this.diapo.but.className = "button selected";
						interpolation(false);
						selected = this.diapo;
					}
				}
			}
			/* ---- command bar buttons ---- */
			this.but = document.createElement('div');
			this.but.className = "button";
			bar.appendChild(this.but);
			this.but.diapo = this;
			this.but.style.left = Math.round((this.but.offsetWidth  * 1.2) * (n % 4)) + 'px';
			this.but.style.top  = Math.round((this.but.offsetHeight * 1.2) * Math.floor(n / 4)) + 'px';
			this.but.onclick = this.img.onclick;
			imb = this.img;
			this.img.diapo = this;
			this.zi = 25000;
		} else {
			/* ---- transparent div ---- */
			this.img = document.createElement('div');
			this.isLoaded = true;
			this.img.className = "fog";
			scr.appendChild(this.img);
			this.w = 300;
			this.h = 300;
			this.zi = 15000;
		}
		/* ---- object variables ---- */
		this.x = x;
		this.y = y;
		this.z = z;
		this.css = this.img.style;
	}
	/* ==== main 3D animation ==== */
	Diapo.prototype.anim = function () {
		if (this.isLoaded) {
			/* ---- 3D to 2D projection ---- */
			var x = this.x - camera.x;
			var y = this.y - camera.y;
			var z = this.z - camera.z;
			if (z < 20) z += 5000;
			var p = camera.fov / z;
			var w = this.w * p;
			var h = this.h * p;
			/* ---- HTML rendering ---- */
			this.css.left   = Math.round(nw + x * p - w * .5) + 'px';
			this.css.top    = Math.round(nh + y * p - h * .5) + 'px';  
			this.css.width  = Math.round(w) + 'px';
			this.css.height = Math.round(h) + 'px';
			this.css.zIndex = this.zi - Math.round(z);
		} else {
			/* ---- image is loaded? ---- */
			this.isLoaded = this.loading();
		}
	}
	/* ==== onload initialization ==== */
	Diapo.prototype.loading = function () {
		if ((this.canvas && this.srcImg.complete) || this.img.complete) {
			if (this.canvas) {
				/* ---- canvas version ---- */
				this.w = this.srcImg.width;
				this.h = this.srcImg.height;
				this.img.width = this.w;
				this.img.height = this.h;
				var context = this.img.getContext("2d");
				context.drawImage(this.srcImg, 0, 0, this.w, this.h);
			} else {
				/* ---- plain image version ---- */
				this.w = this.img.width;
				this.h = this.img.height;
			}
			/* ---- button loaded ---- */
			this.but.className += " loaded";
			return true;
		}
		return false;
	}
	////////////////////////////////////////////////////////////////////////////
	/* ==== screen dimensions ==== */
	var resize = function () {
		nw = scr.offsetWidth * .5;
		nh = scr.offsetHeight * .5;
	}
	/* ==== disable interpolation during animation ==== */
	var interpolation = function (bicubic) {
		var i = 0, o;
		while( o = diapo[i++] ) {
			if (o.but) {
				o.css.msInterpolationMode = bicubic ? 'bicubic' : 'nearest-neighbor'; // makes IE8 happy
				o.css.imageRendering = bicubic ? 'optimizeQuality' : 'optimizeSpeed'; // does not really work...
			}
		}
	}
	/* ==== init script ==== */
	var init = function (data) {
		/* ---- containers ---- */
		scr = document.getElementById("screen");
		bar = document.getElementById("bar");
		urlInfo = document.getElementById("urlInfo");
		datail = document.getElementById("datail");
		
		resize();
		/* ---- loading images ---- */
		var i = 0, 
		    o,
			n = data.length;
		while( o = data[i++] ) {
			/* ---- images ---- */
			var x = 1000 * ((i % 4) - 1.5);
			var y = Math.round(Math.random() * 4000) - 2000;
			var z = i * (5000 / n);
			diapo.push( new Diapo(i - 1, o, x, y, z));
			/* ---- transparent frames ---- */
			var k = diapo.length - 1;
			for (var j = 0; j < 3; j++) {
				var x = Math.round(Math.random() * 4000) - 2000;
				var y = Math.round(Math.random() * 4000) - 2000;
				diapo.push( new Diapo(k, null, x, y, z + 100));
			}
		}
		/* ---- start engine ---- */
		run();
	}
	////////////////////////////////////////////////////////////////////////////
	/* ==== main loop ==== */
	var run = function () {
		/* ---- x axis move ---- */
		if (camera.tx) {

			if (!camera.s) camera.setTarget(camera.x, camera.tx);
			var m = camera.tween('x');
			if (!m) camera.tx = 0;
		/* ---- y axis move ---- */
		} else if (camera.ty) {
			if (!camera.s) camera.setTarget(camera.y, camera.ty); 
			var m = camera.tween('y');
			if (!m) camera.ty = 0;
		/* ---- z axis move ---- */
		} else if (camera.tz) {
			if (!camera.s) camera.setTarget(camera.z, camera.tz);
			var m = camera.tween('z');
			if (!m) {
				/* ---- animation end ---- */
				camera.tz = 0;
				interpolation(true);
				/* ---- activate hyperlink ---- */
				if (selected.url) {
					
					selected.img.style.cursor = "pointer";
					selected.urlActive = true;
					selected.img.className = "href";
					
					urlInfo.diapo = selected;
					urlInfo.onclick = selected.img.onclick;
					urlInfo.innerHTML = selected.title || selected.url;
					urlInfo.style.visibility = "visible";
					urlInfo.style.color = selected.color || "#fff";
					urlInfo.style.top = Math.round(selected.img.offsetTop + selected.img.offsetHeight - urlInfo.offsetHeight - 5) + "px";
					urlInfo.style.left = Math.round(selected.img.offsetLeft + selected.img.offsetWidth - urlInfo.offsetWidth - 5) + "px";
					
					detail.diapo = selected;
					detail.onclick = selected.img.onclick;
					detail.innerHTML = selected.detail;
					detail.style.visibility = "visible";
					detail.style.color = selected.color || "#fff";
					detail.style.top = Math.round(selected.img.offsetTop + selected.img.offsetHeight - urlInfo.offsetHeight - 5) + "px";
					detail.style.left = Math.round(selected.img.offsetLeft + selected.img.offsetWidth - urlInfo.offsetWidth - 5) + "px";
					
				} else {
					selected.img.style.cursor = "default";
				}
			}
		}
		/* ---- anim images ---- */
		var i = 0, o;
		while( o = diapo[i++] ) o.anim();
		/* ---- loop ---- */
		setTimeout(run, 32);
	}
	return {
		////////////////////////////////////////////////////////////////////////////
		/* ==== initialize script ==== */
		init : init
	}
}();

</script>
</head>

<body>

<div id="screen">
	<div id="command">
		<h1>Dota 2 </h1>
		<p>无兄弟，不DOTA!</p>
		<div id="bar"></div>
	</div>
	<div id="urlInfo"></div>
	<div id="detail"></div>
</div>

<script type="text/javascript">
/* ==== start script ==== */
setTimeout(function() {
	m3D.init(
		[ 
			//{ src: '46eae50db6.jpg', url: 'http://www.ectopc.com', title: '页面跳转', color: '#fff' },
			{ src: '1.png' , url: '#', title: '撼地者', detail: '劳资就是测试一下', color: '#fff' },
			{ src: '2.png' , url: '#', title: '斯温', color: '#fff' },
			{ src: '3.png' , url: '#', title: '小小', color: '#fff' },
			{ src: '4.png' , url: '#', title: '昆卡', color: '#fff' },
			{ src: '5.png' , url: '#', title: '兽王', color: '#fff' },
			{ src: '6.png' , url: '#', title: '龙骑士', color: '#fff' },
			{ src: '7.png' , url: '#', title: '发条技师', color: '#fff' },
			{ src: '8.png' , url: '#', title: '全能骑士', color: '#fff' },
			{ src: '9.png' , url: '#', title: '哈斯卡', color: '#fff' },
			{ src: '10.png' , url: '#', title: '炼金术士', color: '#fff' },
			{ src: '11.png' , url: '#', title: '酒仙', color: '#fff' },
			{ src: '12.png' , url: '#', title: '树精卫士', color: '#fff' },
			{ src: '13.png' , url: '#', title: '精灵守卫', color: '#fff' },
			{ src: '14.png' , url: '#', title: '半人马战行者', color: '#fff' },
			{ src: '15.png' , url: '#', title: '敌法师', color: '#fff' },
			{ src: '16.png' , url: '#', title: '卓尔游侠', color: '#fff' },
			{ src: '17.png' , url: '#', title: '痛苦女王', color: '#fff' },
			{ src: '18.png' , url: '#', title: '主宰', color: '#fff' },
			{ src: '19.png' , url: '#', title: '米拉娜', color: '#fff' },
			{ src: '20.png' , url: '#', title: '变体精灵', color: '#fff' },
			{ src: '21.png' , url: '#', title: '狙击手', color: '#fff' },
			{ src: '22.png' , url: '#', title: '圣堂刺客', color: '#fff' },
			{ src: '23.png' , url: '#', title: '露娜', color: '#fff' },
			{ src: '24.png' , url: '#', title: '赏金猎人', color: '#fff' },
			{ src: '25.png' , url: '#', title: '熊战士', color: '#fff' },
			{ src: '26.png' , url: '#', title: '矮人直升机', color: '#fff' },
			{ src: '27.png' , url: '#', title: '德鲁伊', color: '#fff' },
			{ src: '28.png' , url: '#', title: '娜迦海妖', color: '#fff' },
			{ src: '29.png' , url: '#', title: '水晶室女', color: '#fff' },
			{ src: '30.png' , url: '#', title: '帕克', color: '#fff' },
			{ src: '31.png' , url: '#', title: '风暴之灵', color: '#fff' },
			{ src: '32.png' , url: '#', title: '风行者', color: '#fff' },
			{ src: '33.png' , url: '#', title: '莉娜', color: '#fff' },
			{ src: '34.png' , url: '#', title: '宙斯', color: '#fff' },
			{ src: '35.png' , url: '#', title: '暗影萨满', color: '#fff' },
			{ src: '36.png' , url: '#', title: '修补匠', color: '#fff' },
			{ src: '37.png' , url: '#', title: '先知', color: '#fff' },
			{ src: '38.png' , url: '#', title: '魅惑魔女', color: '#fff' },
			{ src: '39.png' , url: '#', title: '杰奇洛', color: '#fff' },
			{ src: '40.png' , url: '#', title: '陈', color: '#fff' },
			{ src: '41.png' , url: '#', title: '沉默术士', color: '#fff' },
			{ src: '42.png' , url: '#', title: '食人魔魔法师', color: '#fff' },
			{ src: '43.png' , url: '#', title: '拉比克', color: '#fff' },
			{ src: '44.png' , url: '#', title: '干扰者', color: '#fff' },
			{ src: '45.png' , url: '#', title: '光之守卫', color: '#fff' },
			{ src: '46.png' , url: '#', title: '斧王', color: '#fff' },
			{ src: '47.png' , url: '#', title: '帕吉', color: '#fff' },
			{ src: '48.png' , url: '#', title: '沙王', color: '#fff' },
			{ src: '49.png' , url: '#', title: '斯拉达', color: '#fff' },
			{ src: '50.png' , url: '#', title: '潮汐猎人', color: '#fff' },
			{ src: '51.png' , url: '#', title: '骷髅王', color: '#fff' },
			{ src: '52.png' , url: '#', title: '噬魂鬼', color: '#fff' },
			{ src: '53.png' , url: '#', title: '暗夜魔王', color: '#fff' },
			{ src: '54.png' , url: '#', title: '末日使者', color: '#fff' },
			{ src: '55.png' , url: '#', title: '裂魂人', color: '#fff' },
			{ src: '56.png' , url: '#', title: '狼人', color: '#fff' },
			{ src: '57.png' , url: '#', title: '混沌骑士', color: '#fff' },
			{ src: '58.png' , url: '#', title: '马格纳斯', color: '#fff' },
			{ src: '59.png' , url: '#', title: '血魔', color: '#fff' },
			{ src: '60.png' , url: '#', title: '影魔', color: '#fff' },
			{ src: '61.png' , url: '#', title: '剃刀', color: '#fff' },
			{ src: '62.png' , url: '#', title: '剧毒术士', color: '#fff' },
			{ src: '63.png' , url: '#', title: '虚空假面', color: '#fff' },
			{ src: '64.png' , url: '#', title: '幻影刺客', color: '#fff' },
			{ src: '65.png' , url: '#', title: '冥界亚龙', color: '#fff' },
			{ src: '66.png' , url: '#', title: '克林克兹', color: '#fff' },
			{ src: '67.png' , url: '#', title: '育母蜘蛛', color: '#fff' },
			{ src: '68.png' , url: '#', title: '编织者', color: '#fff' },
			{ src: '69.png' , url: '#', title: '幽鬼', color: '#fff' },
			{ src: '70.png' , url: '#', title: '米波', color: '#fff' },
			{ src: '71.png' , url: '#', title: '司夜刺客', color: '#fff' },
			{ src: '72.png' , url: '#', title: '斯拉克', color: '#fff' },
			{ src: '73.png' , url: '#', title: '祸乱之源', color: '#fff' },
			{ src: '74.png' , url: '#', title: '巫妖', color: '#fff' },
			{ src: '75.png' , url: '#', title: '莱恩', color: '#fff' },
			{ src: '76.png' , url: '#', title: '巫医', color: '#fff' },
			{ src: '77.png' , url: '#', title: '谜团', color: '#fff' },
			{ src: '78.png' , url: '#', title: '瘟疫法师', color: '#fff' },
			{ src: '79.png' , url: '#', title: '术士', color: '#fff' },
			{ src: '80.png' , url: '#', title: '死亡先知', color: '#fff' },
			{ src: '81.png' , url: '#', title: '帕格纳', color: '#fff' },
			{ src: '82.png' , url: '#', title: '戴泽', color: '#fff' },
			{ src: '83.png' , url: '#', title: '拉席克', color: '#fff' },
			{ src: '84.png' , url: '#', title: '黑暗贤者', color: '#fff' },
			{ src: '85.png' , url: '#', title: '蝙蝠骑士', color: '#fff' },
			{ src: '86.png' , url: '#', title: '极寒幽魂', color: '#fff' },
			{ src: '87.png' , url: '#', title: '祈求者', color: '#fff' },
			{ src: '88.png' , url: '#', title: '殁境毁灭者', color: '#fff' },
			{ src: '89.png' , url: '#', title: '暗影恶魔', color: '#fff' },
			{ src: '90.png' , url: '#', title: '维萨吉', color: '#fff' },
		]
	);
}, 500);
</script>

</body>
</html>